  <template>
 <div class="page">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button @click="addCategoriesFn">添加分类</el-button>
    <el-table :data="tableData.list" style="width: 100%; margin-bottom: 20px" row-key="cat_id" max-height="450px">
      <el-table-column prop="cat_name" label="分类名称" sortable width="180" />
      <el-table-column prop="cat_level" label="级别" sortable width="180">
        <template #default="scope">
          <span v-if="scope.row.cat_level == '0'">一级</span>
          <span v-if="scope.row.cat_level == '1'">二级</span>
          <span v-if="scope.row.cat_level == '2'">三级</span>
        </template>
      </el-table-column>
      <el-table-column prop="cat_deleted" label="是否有效" sortable width="180">
        <template #default="scope">
          <span v-if="scope.row.cat_deleted == false">无效</span>
          <span v-if="scope.row.cat_deleted == true">有效</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" sortable width="180">
        <template #default="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="editlog(scope.row)"></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteCategoriesFn(scope.row.cat_id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:currentPage="tableData.params.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog v-model="tableData.dialogFormVisible" title="添加分类" width="40%">
      <el-form :model="tableData.form" ref="form" label-width="120px" class="demo-ruleForm">
        <el-form-item label="分类名" label-width="120px">
          <el-input v-model="tableData.form.cat_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类" label-width="120px">
          <el-cascader
            :props="tableData.cateProps"
            v-model="tableData.value"
            :options="tableData.options"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="tableData.dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addCateFn">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="tableData.editInfoDialog" title="修改商品分类">
      <el-form :model="tableData.editInfoForm" ref="editInfoForm">
        <el-form-item label-width="80px">
          <el-input v-model="tableData.editInfoForm.cat_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="tableData.editInfoDialog = false">取 消</el-button>
          <el-button type="primary" @click="putCategoriesFn">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { reactive, defineComponent, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from 'element-plus'
import { getCategories, addCategory, updataCate, deleteCate } from "../../http/api";
export default defineComponent({
  setup() {
    const router = useRouter();
    let tableData = reactive({
      list: [],
      params: {
        pagenum: 1,
        pagesize: 10,
        query: "",
      },
      total: 0,
      options: [],
      value: [],
      cateProps: {
        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
      },
      dialogFormVisible: false,
      form: {
        cat_pid: 0,
        cat_name: "",
        cat_level: 0
      },
      editInfoDialog: false,
      editInfoForm: {
        cat_name: '',
      }
    })
    //页码改变事件
    const handleCurrentChange = (value) => {
      tableData.params.pagenum = value;
      getCategoriesData();
    };
    // 每页数量改变事件
    const handleSizeChange = (value) => {
      tableData.params.pagesize = value;
      getCategoriesData();
    };

    // 获取信息
    let getCategoriesData = async () => {
      let result = await getCategories(tableData.params);
      tableData.total = result.total;
      tableData.list = result.result;
    };
    // 初始化信息
    onMounted(async () => {
      getCategoriesData();
    });

    const handleChange = () => {
      console.log(tableData.value)
      if (tableData.value.length > 1) {
        tableData.form.cat_pid = tableData.value[tableData.value.length - 1]
        tableData.form.cat_level = tableData.value.length
        return
      } else {
        tableData.form.cat_pid = 0
        tableData.form.cat_level = 0
      }
    };
    const addCategoriesFn = async () => {

      let res = await getCategories({ type: 2 })
      tableData.options = res
      tableData.dialogFormVisible = true
    }
    const addCateFn = async () => {
      await addCategory(tableData.form);
      tableData.dialogFormVisible = false
      getCategoriesData()
    }
    //编辑提交信息弹窗 回显信息
    const editlog = (obj) => {
      tableData.editInfoDialog = true;
      tableData.editInfoForm = { ...obj }
    }
    //编辑提交分类
    const putCategoriesFn= async()=> {
      const { cat_id, cat_name } = tableData.editInfoForm
      await updataCate(cat_id, { cat_name });
      tableData.editInfoDialog = false;
      getCategoriesData()
    }
    //删除
    const deleteCategoriesFn=(id)=> {
      ElMessageBox.confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteCate(id)
        getCategoriesData()
      })
    }
    return {
      tableData,
      getCategoriesData,
      handleCurrentChange,
      handleSizeChange,
      handleChange,
      addCategoriesFn,
      addCateFn,
      editlog,
      putCategoriesFn,
      deleteCategoriesFn
    }
  }
})
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
  .el-breadcrumb {
    margin: 15px;
  }
}
</style>
>>>>>>> 442297f1c5a7c52842701ce0f8837c0530db09fe
